﻿<!-- Copyright (C) 2013-2014 Ralph Becket -->
<!-- Released under a variant of the Microsoft Public License -- see ../LICENCE.txt. -->


<!-- (Public template) RawbAreaResizingHandleTemplate -->
<!-- Adds a resizing "handle" to the lower right of its container, -->
<!-- which must support absolutely positioned children. -->
<!-- PARAMETERS -->
<!--
    hAndVDragger: the dragger controlling the resizing.
-->
<script type="text/html" id="RawbAreaResizingHandleTemplate">
    <div
        class="rawb-area-resizing-handle"
        data-bind="event: { mousedown: startDragging }"
    >
    </div>
</script>

<!-- (Private template) RawbGridRowOfHeaderCellsTemplate -->
<!-- PARAMETERS -->
<!-- columns: array of column specs. -->
<!--    Each column spec defines left, width, headerTemplateID, headerFormatter, and header. -->
<!-- headerRowHeight: height in pixels of cells in the row. -->
<script type="text/html" id="RawbGridRowOfHeaderCellsTemplate">

    <!-- ko foreach: columns -->

        <div
            class="rawb-grid-cell"
            data-bind="
                style: {
                    left: left() + 'px',
                    width: width() + 'px',
                    height: $parent.headerRowHeight() + 'px'
                },
                template: {
                    if: header !== undefined,
                    name: headerTemplateID,
                    data: { data: function () { return header; }, formatter: headerFormatter }
                },
                event: {
                    click: headerClick,
                    dblclick: headerDblClick
                }"
        >
        </div>

        <div
            class="rawb-grid-resizer"
            data-bind="
                style: {
                    left: left() + width() + 'px',
                    width: $parent.resizerWidth() + 'px',
                    height: $parent.headerRowHeight() + 'px'
                },
                event: {
                    mousedown: resizer.startDragging
                }"
        >
        </div>

    <!-- /ko -->

</script>

<!-- (Private template) RawbGridRowsOfValueCellsTemplate -->
<!-- PARAMETERS -->
<!-- columns: array of column specs. -->
<!--    Each column spec defines left, width, valueTemplateID, valueFormatter, and valueField. -->
<!-- valueRowHeight: height in pixels of cells in each row. -->
<!-- rows: array of value objects to display. -->
<!-- -->
<!-- The identity function around the template data argument prevents -->
<!-- Knockout from placing a dependency on the cell. -->
<!-- This is very important for performance: without it, Knockout will -->
<!-- re-render on every grid scroll event! -->
<script type="text/html" id="RawbGridRowsOfValueCellsTemplate">

    <!-- ko foreach: { data: rows, as: "r" } -->

        <!-- ko foreach: { data: $parent.columns, as: "c" } -->

            <div
                class="rawb-grid-cell"
                data-bind="
                    style: {
                        left: c.left() + 'px',
                        width: c.width() + 'px',
                        top: $parentContext.$index() * $parents[1].valueRowHeight() + 'px',
                        height: $parents[1].valueRowHeight() + 'px'
                    },
                    css: {
                         'rawb-grid-striped': ($parentContext.$index() + $parents[1].topRowIndex()) % (2 * $parents[1].rowsPerStripe()) < $parents[1].rowsPerStripe(),
                         'rawb-grid-selected': ($parents[1].selection() && $parents[1].selection() === $parents[1].data()[$parents[1].topRowIndex() + $parentContext.$index()])
                    },
                    template: {
                        if: r[c.valueField] !== undefined,
                        name: valueTemplateID,
                        data: { data: r[c.valueField], formatter: c.valueFormatter }
                    },
                    event: {
                        click: function () { $parents[1].valueRowClick($parents[1].data()[$parents[1].topRowIndex() + $parentContext.$index()]); return true; },
                        dblclick: function () { $parents[1].valueRowDblClick($parents[1].data()[$parents[1].topRowIndex() + $parentContext.$index()]); return true; }
                    }"
            >
            </div>

            <div
                class="rawb-grid-resizer"
                data-bind="
                    style: {
                        left: c.left() + c.width() + 'px',
                        width: $parents[1].resizerWidth() + 'px',
                        top: $parentContext.$index() * $parents[1].valueRowHeight() + 'px',
                        height: $parents[1].valueRowHeight() + 'px'
                    },
                    event: {
                        mousedown: c.resizer.startDragging
                    }"
            >
            </div>

        <!-- /ko -->

    <!-- /ko -->

</script>

<!-- (Private template) RawbGridRowOfFooterCellsTemplate -->
<!-- PARAMETERS -->
<!-- columns: array of column specs. -->
<!--    Each column spec defines left, width, footerTemplateID, footerFormatter, and footer. -->
<!-- footerRowHeight: height in pixels of cells in the row. -->
<script type="text/html" id="RawbGridRowOfFooterCellsTemplate">

    <!-- ko foreach: columns -->

        <div
            class="rawb-grid-cell"
            data-bind="
                style: {
                    left: left() + 'px',
                    width: width() + 'px',
                    height: $parent.footerRowHeight() + 'px'
                },
                template: {
                    if: footer !== undefined,
                    name: footerTemplateID,
                    data: { data: function () { return footer; }, formatter: footerFormatter }
                },
                event: {
                    click: footerClick,
                    dblclick: footerDblClick
                }"
        >
        </div>

        <div
            class="rawb-grid-resizer"
            data-bind="
                style: {
                    left: left() + width() + 'px',
                    width: $parent.resizerWidth() + 'px',
                    height: $parent.footerRowHeight() + 'px'
                },
                event: {
                    mousedown: resizer.startDragging
                }"
        >
        </div>

    <!-- /ko -->

</script>

<!-- (Private template) RawbGridHeaderValuesFooterTemplate -->
<!-- PARAMETERS -->
<!-- left, headerTop, valuesTop, footerTop: absolute positions in pixels. -->
<!-- width, resizerWidth, headerRowHeight, footerRowHeight, valueRowHeight, valuesHeight: dimensions in pixels. -->
<!-- columns: array of column specs. -->
<!--    Each column spec defines left, width, -->
<!--    header, headerFormatter, headerTemplateID, -->
<!--    footer, footerFormatter, footerTemplateID, -->
<!--    valueField, valueFormatter, valueTemplateID. -->
<!-- rows: array of value objects to display. -->
<script type="text/html" id="RawbGridHeaderValuesFooterTemplate">

    <div
        class="rawb-grid-header rawb-grid-section"
        data-bind="
            style: {
                left: left() + 'px',
                width: width() + 'px',
                top: headerTop() + 'px',
                height: headerRowHeight() + 'px'
            },
            css: {
                'rawb-grid-left': isLeft,
                'rawb-grid-middle': isMiddle,
                'rawb-grid-right': isRight
            },
            template: {
                name: 'RawbGridRowOfHeaderCellsTemplate',
                data: headerViewModel
            }
    ">
    </div>

    <div
        class="rawb-grid-values rawb-grid-section"
        data-bind="
            style: {
                left: left() + 'px',
                width: width() + 'px',
                top: valuesTop() + 'px',
                height: valuesHeight() + 'px'
            },
            css: {
                'rawb-grid-left': isLeft,
                'rawb-grid-middle': isMiddle,
                'rawb-grid-right': isRight
            },
            template: {
                name: 'RawbGridRowsOfValueCellsTemplate',
                data: valuesViewModel
            }
    ">
    </div>

    <div
        class="rawb-grid-footer rawb-grid-section"
        data-bind="
            style: {
                left: left() + 'px',
                width: width() + 'px',
                top: footerTop() + 'px',
                height: footerRowHeight() + 'px'
            },
            css: {
                'rawb-grid-left': isLeft,
                'rawb-grid-middle': isMiddle,
                'rawb-grid-right': isRight
            },
            template: {
                name: 'RawbGridRowOfFooterCellsTemplate',
                data: footerViewModel
            }
    ">
    </div>

</script>

<!-- (Public template) RawbVScrollBarTemplate -->
<!-- PARAMETERS -->
<!-- left, width, top, height: absolute position in pixels. -->
<!-- scrollBar: the Rawb ScrollBar object. -->
<script type="text/html" id="RawbVScrollBarTemplate">

    <div
        class="rawb-scrollbar-track rawb-scrollbar-vertical"
        data-bind="
            style: {
                left: left() + 'px',
                width: width() + 'px',
                top: top() + 'px',
                height: height() + 'px'
            }
        ">

        <div
            class="rawb-scrollbar-thumb"
            data-bind="
                style: {
                    left: 0,
                    width: width() + 'px',
                    top: scrollBar.startPc() + '%',
                    height: scrollBar.sizePc() + '%'
                },
                event: {
                    mousedown: scrollBar.startDragging
                }
            ">
        </div>

    </div>

</script>

<!-- (Public template) RawbHScrollBarTemplate -->
<!-- PARAMETERS -->
<!-- left, width, top, height: absolute position in pixels. -->
<!-- scrollBar: the Rawb ScrollBar object. -->
<script type="text/html" id="RawbHScrollBarTemplate">

    <div
        class="rawb-scrollbar-track rawb-scrollbar-horizontal"
        data-bind="
            style: {
                left: left() + 'px',
                width: width() + 'px',
                top: top() + 'px',
                height: height() + 'px'
            }
        ">

        <div
            class="rawb-scrollbar-thumb"
            data-bind="
                style: {
                    left: scrollBar.startPc() + '%',
                    width: scrollBar.sizePc() + '%',
                    top: 0,
                    height: height() + 'px'
                },
                event: {
                    mousedown: scrollBar.startDragging
                }
            ">
        </div>

    </div>

</script>

<!-- (Public template) RawbGridTemplate -->
<!-- All parameters are encapsulated in the Rawb Grid object, the parameter of the template. -->
<script type="text/html" id="RawbGridTemplate">

    <div 
        class="rawb-grid"
        tabindex="0"
        data-bind="
            style: {
                width: width() + 'px',
                height: height() + 'px'
            },
            event: {
                keydown: keyDown,
                mousewheel: mouseWheel
            }
        ">

        <!-- ko
            template: {
                name: 'RawbGridHeaderValuesFooterTemplate',
                data: leftViewModel
            }
        -->
        <!-- /ko -->

        <!-- ko
            template: {
                name: 'RawbGridHeaderValuesFooterTemplate',
                data: middleViewModel
            }
        -->
        <!-- /ko -->

        <!-- ko
            template: {
                name: 'RawbVScrollBarTemplate',
                data: vScrollBarViewModel
            }
        -->
        <!-- /ko -->

        <!-- ko
            template: {
                name: 'RawbHScrollBarTemplate',
                data: hScrollBarViewModel
            }
        -->
        <!-- /ko -->

        <!-- ko
            template: {
                name: 'RawbGridHeaderValuesFooterTemplate',
                data: rightViewModel
            }
        -->
        <!-- /ko -->

        <!-- ko
            template: {
                if: includeResizingHandle,
                name: 'RawbAreaResizingHandleTemplate',
                data: resizingDragger
            }
        -->
        <!-- /ko -->

    </div>

</script>

<!-- Basic Rawb Grid cell templates.  RawbGridTextCellTemplate is the default. -->

<script type="text/html" id="RawbGridTextCellTemplate">

    <span data-bind="text: formatter(data())"></span>

</script>

<script type="text/html" id="RawbGridRightAlignedTextCellTemplate">

    <span style="float: right" data-bind="text: formatter(data())"></span>

</script>

<script type="text/html" id="RawbGridCentredTextCellTemplate">

    <span style="display: block; text-align: center" data-bind="text: formatter(data())"></span>

</script>

<script type="text/html" id="RawbGridCenteredTextCellTemplate">

    <span style="display: block; margin-left: auto; margin-right: auto" data-bind="text: formatter(data())"></span>

</script>

<!-- NOTE: It is important to exclude grid cell inputs from the tabbing order.  Try it if you doubt me! -->
<script type="text/html" id="RawbGridCheckboxCellTemplate">

    <input
        type="checkbox"
        tabindex="-1"
        class="rawb-grid-cell-checkbox"
        data-bind="checked: data()"
    >

</script>

<script type="text/html" id="RawbDropDownTemplate">
    <div
        class="rawb-dropdown"
        data-bind="
            style: { width: width() + 'px', height: inputHeight() + 'px' },
            css: { 'rawb-dropdown-grid-is-open': displayingGrid }
        ">
        <input
            class="rawb-dropdown-input"
            data-bind="
                value: input,
                enable: enabled,
                valueUpdate: 'afterkeydown',
                event: {
                    focus: inputFocus,
                    mouseup: inputMouseUp,
                    blur: inputBlur,
                    keydown: inputKeyDown,
                    keypress: inputKeyPress
                }
            ">
        <div
            class="rawb-dropdown-grid"
            data-bind="
                visible: matches().length,
                event: { mousedown: gridMouseDown, mouseout: gridMouseOut, click: gridClick },
                template: {
                    if: displayingGrid,
                    name: 'RawbGridTemplate',
                    data: grid
                },
                style: { left: gridLeft + 'px', top: '100%' }
        ">
        </div>
    </div>
</script>

<script type="text/html" id="RawbDropDownMatchTemplate">
    <div data-bind="if: data()">
        <span class="rawb-dropdown-match-prefix" data-bind="text: data().prefix"></span><span class="rawb-dropdown-match-match" data-bind="text: data().match"></span><span class="rawb-dropdown-match-suffix" data-bind="text: data().suffix"></span>
    </div>
</script>

<script type="text/html" id="RawbManagedInputTemplate">
    <input data-bind="
        value: input,
        enable: enabled,
        event: { focus: inputFocus, blur: inputBlur }
    ">
</script>